<template>
  <el-container>
    <el-aside width="250px">
      <el-collapse v-model="activeName1">
        <el-collapse-item title="文件" name="1">
          <el-upload drag :before-upload="handleBeforeUpload">
            <div class="el-upload__text">
              拖放文件或者 <em>点击打开文件</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                仅支持酷家乐全屋定制导出的json文件
              </div>
            </template>
          </el-upload>
        </el-collapse-item>
        <!-- </el-collapse>
      <el-collapse v-model="activeName2" accordion> -->
        <el-collapse-item title="颜色" name="2">
          <ColorPanel></ColorPanel>
        </el-collapse-item>
        <el-collapse-item title="分类" name="3">
          <el-checkbox size="small" @change="changeVisibleByCategory" v-model="showDoor">门板</el-checkbox>
          <el-checkbox size="small" @change="changeVisibleByCategory" v-model="showDrawer">抽屉</el-checkbox>
        </el-collapse-item>
      </el-collapse>
    </el-aside>
    <el-main>
      <DockPanel />
      <div id="canvascontainer">
        <canvas id="three"></canvas>
      </div>
    </el-main>
    <el-aside width="440px">
      <Right />
    </el-aside>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, unref } from 'vue';
import { ElNotification } from 'element-plus'
import { initThree, clearScene, drawAllModels, changeSubVisibleByCategory, getParsedJsonModelsFromRaw } from '@/core3d';
import { DrawAssemblyProduct } from '@/core3d/drawing';
import { ElTree } from 'element-plus'
import ColorPanel from './leftpanels/ColorPanel.vue';
import DockPanel from './DockPanel.vue';
import type { KujialeParamModel } from '@/core3d/types/KujialeJsonModels/KujialeParamModel';
import type { KujialeAssemblyModel } from '@/core3d/types/KujialeJsonModels/KujialeAssemblyModel';
import { useCurrentModelStore } from '@/stores/current';
import Right from './rightpanels/Right.vue';

export default defineComponent({
  components: { ColorPanel, DockPanel, Right },
  setup(props, { emit, attrs }) {

    const activeName1 = ref(["1", "2", "3"]);
    const defaultProps = {
      children: 'subModels',
      label: 'modelName',
    }
    const showDoor = ref(true);
    const showDrawer = ref(true);

    onMounted(() => {
      initThree();
    });

    const openParamModel = (models: KujialeParamModel[], KujialeAssemblyModels: KujialeAssemblyModel[]) => {
      var r = drawAllModels(models, KujialeAssemblyModels);

      var store = useCurrentModelStore();
      store.setLogs(r.logs);

      if (r.code == 0) {
        ElNotification.success({
          title: '导入酷家乐json成功',
          message: `成功绘制${models.length}个模型`
        });
      }
      else {
        ElNotification.error({
          title: '导入酷家乐json发生错误',
          message: '解析错误，请检查上传文件是否符合酷家乐json格式'
        })
      }
    }

    const handleBeforeUpload = (rawFile: File) => {
      var reader = new FileReader(); //  创建 FileReader对象
      reader.readAsText(rawFile); //  把文件读取为字符串
      //  文件加载完成
      reader.onload = function (ev) {
        if (ev.target) {
          var jsonStr = ev.target.result as string; //  把字符串传给 jsonStr
          var json = JSON.parse(jsonStr); //  把 JSON 字符串转换为 JSON 对象

          var newKujialeAssemblyModels = json.assemblyModels.map((a: KujialeAssemblyModel) => a);
          var newmodels = getParsedJsonModelsFromRaw(json);

          var store = useCurrentModelStore();
          store.setCurrentAuditOrder(json.auditOrder);
          store.setCurrentPartnerOrder(json.partnerOrder);
          store.setCurrentCreateDate(json.jsonInfo.generatedTime);

          clearScene();
          openParamModel(newmodels, newKujialeAssemblyModels);
        }
      };
      return false;
    }

    const changeVisibleByCategory = () => {
      const dict: { [key: number]: boolean } = {};
      dict[498] = showDoor.value;//door
      dict[1043] = showDrawer.value;//drawer

      changeSubVisibleByCategory(dict);
    }

    return {
      defaultProps, activeName1, handleBeforeUpload, changeVisibleByCategory, showDoor, showDrawer
    }
  }
});
</script>

<style scoped>
.treeview {
  border: 1px solid var(--el-border-color);
}

.el-card {
  margin-bottom: 10px;
}
</style>